<template>
  <div class="body-box">
    <div>
      <el-button size="mini" class="com-btn" @click="addTeamSign()">添加团报</el-button>
    </div>
    <window-title title="团报列表"></window-title>
    <div class="table-box">
      <!-- <table class="group-sign-table">
        <tr>
          <th>名称</th>
          <th>开启密码</th>
          <th>团报基数</th>
          <th>总人数</th>
          <th>状态</th>
          <th>有效期</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item,key) in list">
          <td>
            <el-link size="mini" type="primary" style="font-size:12px;" @click="seeTeampaper(item.id)">{{item.name}}</el-link>
          </td>
          <td>
            <el-tag size="mini" type="success" v-if="item.open_pwd">开启</el-tag>
            <el-tag size="mini" type="danger" v-else>未开启</el-tag>
          </td>
          <td>
            <span v-if="item.open_base">{{item.base_num}}</span>
            <el-tag size="mini" type="danger" v-else>未开启</el-tag>
          </td>
          <td>{{item.total_people}}</td>
          <td>
            <el-tag size="mini" type="success" v-if="item.state == 1">开启</el-tag>
            <el-tag size="mini" type="danger" v-else>禁用</el-tag>
          </td>
          <td>{{item.start_time}} - {{item.end_time}}</td>
          <td>{{item.create_time}}</td>
          <td>

          </td>
        </tr>
      </table> -->
      <el-table size="mini" border v-loading='load' :data="list">
        <el-table-column type="index" width="50px"></el-table-column>
        <el-table-column label="名称">
            <template slot-scope="item">
                <el-link size="mini" type="primary" style="font-size:12px;" @click="seeTeampaper(item.row.id)">{{item.row.name}}</el-link>
            </template>
        </el-table-column>
        <el-table-column label="开启密码" width="80">
            <template slot-scope="item">
                <el-tag size="mini" type="success" v-if="item.row.open_pwd">开启</el-tag>
                <el-tag size="mini" type="danger" v-else>未开启</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="团报基数" width="80">
            <template slot-scope="item">
                <span v-if="item.row.open_base">{{item.row.base_num}}</span>
                <el-tag size="mini" type="danger" v-else>未开启</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="团报人数" prop="real_sign" width="80">
          <template slot-scope="item">
            {{item.row.real_sign}} / {{item.row.total_people}}
          </template>
        </el-table-column>
        <!-- <el-table-column label="团报人数" prop="total_people" width="60"></el-table-column> -->
        <el-table-column label="状态" width="60">
            <template slot-scope="item">
                <el-tag size="mini" type="success" v-if="item.row.state == 1">开启</el-tag>
                <el-tag size="mini" type="danger" v-else>禁用</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="有效期" width="180">
            <template slot-scope="item">
                {{item.row.start_time}} - {{item.row.end_time}}
            </template>
        </el-table-column>
        <!-- <el-table-column label="创建时间" width="150" prop="create_time"></el-table-column> -->
        <el-table-column label="操作" width="150">
            <template slot-scope="item">
                <el-button icon="el-icon-close" size="mini" type="text" v-if="item.row.state == 1" @click="setState(item.row.id)">禁用</el-button>
                <el-button icon="el-icon-check" size="mini" type="text" v-else @click="setState(item.row.id)">启用</el-button>
                <el-button icon="el-icon-document-copy" type="text" size="mini">复制链接</el-button>
            </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import windowTitle from "../../../components/unit/title.vue";
import addTeam from "../edit/add-teamsign.vue";

export default {
  components: { windowTitle, addTeam },
  props : {active_id : {}},
  data(){
      return {
          list : [],
          load : true
      }
  },
  mounted(){
      this.getData();
  },
  methods: {
    //查看团报
    seeTeampaper(id){
        this.$layer.iframe({
        content: {
          content: addTeam, //传递的组件对象
          parent: this, //当前的vue对象
          data: {
              active_id : this.active_id,
              team_id : id
          } //props
        },
        area: ["800px", "600px"],
        title: "查看团报"
      });

    },
    //更改状态
    setState(id){
        this.$confirm('确定更改当前状态?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.ajaxs('active/setTeamPaperState',{
                data : { id : id},
                success:(res) => {
                    this.toast(res.code,res.msg);
                    if(res.code) {
                        this.getData();
                    }
                }
            });
        }).catch(() => {       
        });
    },
    //团报列表
    getData(){
        this.ajaxs('active/teampaperList',{
            data:{ active_id : this.active_id },
            success:(res) => {
                this.list = res.msg;
                this.load = false;
            }
        });
    },
    //添加团报
    addTeamSign() {
      this.$layer.iframe({
        content: {
          content: addTeam, //传递的组件对象
          parent: this, //当前的vue对象
          data: {
              active_id : this.active_id,
              id : 0
          } //props
        },
        area: ["800px", "600px"],
        title: "添加团报"
      });
    }
  }
};
</script>

<style>
.table-box {
  margin-top: 10px;
}
.group-sign-table{width: 100%;border-collapse: collapse;}
.group-sign-table th,.group-sign-table td{text-align: left;padding-left: 10px;height: 32px;line-height: 32px;border: 1px solid #e1e1e1;}
</style>